<template>
    <section class="collect_datadb_form">
        <el-form rel="form" :model="datadbForm" class="second_form">
            <el-form-item label="数据源名称">
                <el-select v-model="form.connDatasourceId" placeholder="请选择">
                    <el-option
                        v-for="item in FTPData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="数据来自" required>
                <el-radio v-model="datadbForm.autoName" label="1" @change="destinationTable='1'">指定表</el-radio>
                <el-radio v-model="datadbForm.autoName" label="2" @change="eventChangeNewTable">新建表</el-radio>
            </el-form-item>
            <el-form-item label="选择表名" required v-show="destinationTable==='1'">
                <el-select v-model="zhiDuanName" placeholder="请选择" @change="selectFormSql">
                    <el-option
                        v-for="item in DatabaseTableData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="填写表名" required v-show="destinationTable==='2'">
                <el-input style="width: 200px" v-model="outDataSourceObj.outTableName"></el-input>
            </el-form-item>

            <el-form-item label="数据匹配" style="margin-bottom: 0px;">
            </el-form-item>
            <el-table
                :data="dataPiPeiTableData">
                <el-table-column
                    align="center"
					label="序号"
					type="index"
					>
                </el-table-column>
                <el-table-column
					align="center"
					label="字段名"
					>
					<template slot-scope="scope">
						<el-input v-model="scope.row.tickName" placeholder=""></el-input>
					</template>
				</el-table-column>
                <el-table-column
					align="center"
					label="中文名"
					>
					<template slot-scope="scope">
						<el-input v-model="scope.row.chineseName" placeholder=""></el-input>
					</template>
				</el-table-column>
                <el-table-column
					align="center"
					label="对应来源字段"
					>
					<template slot-scope="scope">
						<el-select v-model="scope.row.ids" placeholder="请选择"  style="width: 160px;">
							<el-option
								v-for="item in sourceField"
								:key="item.id"
								:label="item.tickName"
								:value="item.id">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
                <el-table-column
					align="center"
					label=""
					>
					<template slot-scope="scope">
						<i class="el-icon-delete" @click="delFormData1(scope)"></i>
					</template>
				</el-table-column>	
            </el-table>
			<el-button type="primary" style="margin-top: 15px;" @click="adddataPiPeiTableData">添加</el-button>
			<el-button type="primary" style="margin-top: 15px;" @click="viewSQL">查看建表SQL</el-button>
        </el-form>
    </section>
</template>

<script>
import {componentGetFTPData,
        computedGetValue,
        computedGetValueDestination,
        computedGetTable,
    } from "../../common/js_css_img/serverResourceComputed"
export default {
    data(){
        return{
            form:{ /*数据表输出都是这里的*/
                "type":3,
                "connDatasourceId":"", 
                "filePath":"",
                "fileName":"文件",
                "sql":"tablename",
                "outputDataFormList":[],
                "inputDataFormList":[],
                "tableName":"",
            },
            FTPData:[],
            datadbForm:{
                dataOriginName:'',
                backData:[],
                wenjianType:[],
                backAdress:'',
                backAdressInput:'',
                sql:'',
                formName:'',
                wenjianOrftp: "1",
                gatherMode: "2",
                columnName: "",
                sqlWhere: "where _id > $LASTMAXVALUE",
                autoName: "1",
            },
            dataPiPeiTableData:[],
            destinationTable: "1",  //目的表（指定表还是新建表)
            DatabaseTableData: [],  //指定表的表名
            zhiDuanName: "",
            viewSQLSubmitButton: 0, //查看建表SQL语句的按键状态，触发事件
            outDataSourceObj: {},   //目的数据源对像集合（查看建表SQL用）
        }
    },
    props:{
        resourceWeb: Number,
        timeSubmit :Boolean,
        sourceField: Array, //对应来源字段
        thirdFormDBdataForm: Object, //修改页面回显数据
    },
    watch:{
        resourceWeb(newValue){
            componentGetFTPData(this,3,newValue);   //数据源选择
        },
        timeSubmit(newVal){
            this.form.inputDataFormList = [];
            for (let i in this.dataPiPeiTableData){
                this.form.inputDataFormList.push(
                    {
                        "key":this.dataPiPeiTableData[i].tickName,
                        "name":this.dataPiPeiTableData[i].chineseName,
                        // "metaDataId":this.dataPiPeiTableData[i].ids,
                        "order":this.dataPiPeiTableData[i].id || this.dataPiPeiTableData[i].ids,
                        "position": this.dataPiPeiTableData[i].id || this.dataPiPeiTableData[i].ids,
                    }
                )
            }
            this.$emit("outPutForm",this.form);
        },
        form: {
            handler(newVal,oldVal){
                //数据库查询表操作
                computedGetTable(this,newVal.connDatasourceId);
                //数据库查询表字段操作
                this.outDataSourceObj.outConnId = newVal.connDatasourceId;
                console.log(newVal);
                // this.form.sql = newVal.outTableName;
            },
            deep: true
        },
        outDataSourceObj: {
            handler(newVal,oldVal){
                this.form.sql = newVal.outTableName;
            },
            deep: true
        },
        zhiDuanName(newVal){
            //数据库查询表字段操作
            this.dataPiPeiTableData = []
            computedGetValue(this,newVal);
            
        },
        sourceField(newVal){
            console.log(newVal);
        },
        thirdFormDBdataForm:{
            handler(newVal,oldVal){
                console.log(newVal.inputDataFormList);
                if(newVal.type==='3'){
                    this.form.connDatasourceId = newVal.connDatasourceId
                    for(let i in  newVal.inputDataFormList){
                        this.dataPiPeiTableData.push(
                            {
                                // yuanData:newVal.inputDataFormList[i].metaDataId,
                                chineseName:newVal.inputDataFormList[i].name,
                                tickName:newVal.inputDataFormList[i].key,
                                ids:newVal.inputDataFormList[i].order,
                            }
                        )
                    }
                    this.form.sql = newVal.sql;
                    this.datadbForm.autoName = "2";
                    this.destinationTable = "2";
                    this.outDataSourceObj.outTableName = newVal.sql;
                }
            },
            deep: true,
        },
    },
    methods:{
        adddataPiPeiTableData(yuanDataName,id){
            console.log(typeof yuanDataName);
            // if((typeof yuanDataName)===string)
            this.dataPiPeiTableData.push(
                {
                    yuanData:"",
                    chineseName:'',
                    tickName: (typeof yuanDataName)==="string" ? yuanDataName : '',
                    order: id,
                    id: id,
                }
            )
            console.log(this.dataPiPeiTableData);
        },
        delFormData1(scope){
            this.dataPiPeiTableData.splice(scope.$index,1);
        },
        viewSQL(){
            this.outDataSourceObj.inputDataFormList = [];
            for (let i in this.dataPiPeiTableData){
                this.outDataSourceObj.inputDataFormList.push(
                    {
                        "key":this.dataPiPeiTableData[i].tickName,
                        "order": this.dataPiPeiTableData[i].ids
                    }
                )
            }
            this.viewSQLSubmitButton = !this.viewSQLSubmitButton;
            this.$emit("viewSQLSubmitButton",this.outDataSourceObj);
            console.log(this.outDataSourceObj);
        },
        eventChangeNewTable(){  //新建表操作
            this.destinationTable='2';
            this.dataPiPeiTableData = this.sourceField;
        },
        selectFormSql(val){
            console.log(val)
            let arr = this.DatabaseTableData
            console.log(arr);
            let obj = {};
            obj = arr.find((item) => {
                return item.id == String(val);
            });
            // console.log(obj.name)
            this.form.sql = obj.name;
        },
    },
    mounted(){
        console.log(this.sourceField);
    },
}
</script>

<style scoped="scoped">
    .collect_datadb_form .icon_diy{
        font-size: 20px;
        vertical-align: middle;
    }
</style>

